<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head th:insert="fragments/head">
</head>
<body>
<header th:insert="fragments/header">
</header>

<main>
    <div class="container">
        <div class="row mt-3">
            <!-- 侧边栏 -->
            <div class="col s12 m4">
                <div class="container">
                    <img th:if="${student.id_students}" class="responsive-img circle z-depth-3" th:src="${student.imgurl}">
                    <img th:unless="${student.id_students}" class="responsive-img circle z-depth-3" src="/img/students/student-stock.png">
                </div>
                <ul class="collapsible z-depth-3 mt-3">
                    <li>
                        <div class="collapsible-header">
                            <i class="material-icons">school</i>
                            <span>个人简介</span>
                        </div>
                        <div class="collapsible-body">
                            <span th:text="${student.descStudents}">学生简介</span>
                        </div>
                    </li>
                    <li>
                        <div class="collapsible-header">
                            <i class="material-icons">drafts</i>联系邮箱
                        </div>
                        <div class="collapsible-body">
                            <span th:text="${student.correoStudents}">学生邮箱</span>
                        </div>
                    </li>
                </ul>
            </div>
            <!-- 学生详情 -->
            <div class="col s12 m8">
                <div class="card z-depth-3">
                    <div class="card-content teal lighten-2 white-text">
                        <span class="card-title">
                            <strong th:text="${student.nomStudents} + ' ' + ${student.apeStudents}"></strong>
                            <span sec:authorize="hasRole('ROLE_ADMIN')">
                                <a th:href="@{/students/edit/{id_students}(id_students=${student.id_students})}"
                                   class="btn-floating waves-effect waves-light btn-small yellow darken-1">
                                    <i class="material-icons">edit</i>
                                </a>
                            </span>
                        </span>
                        <p th:if="${student.detalleStudents}">
                            <span th:text="${student.detalleStudents}">详情</span>
                            <a sec:authorize="hasRole('ROLE_ADMIN')"
                               class="btn-floating btn-small red lighten-1 waves-effect waves-light modal-trigger"
                               href="#modal-detalle">
                                <i class="material-icons">edit</i>
                            </a>
                        </p>
                        <p th:unless="${student.detalleStudents}">
                            <a class="btn-floating btn-small red lighten-1 modal-trigger waves-effect waves-light"
                               href="#modal-detalle">
                                <i class="material-icons">add</i>
                            </a>
                        </p>
                    </div>
                    <!-- 模态框结构 -->
                    <div id="modal-detalle" class="modal">
                        <form th:action="@{/students/patch/{id_students}(id_students=${student.id_students})}"
                              th:object="${student}" method="post">
                            <div class="modal-content">
                                <h4 class="teal-text">详细介绍</h4>
                                <div class="input-field">
                                    <label for="detalle-student">详情</label>
                                    <textarea th:field="*{detalleStudents}"
                                              id="detalle-student"
                                              class="materialize-textarea"></textarea>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <a href="#!" class="modal-close waves-effect waves-red btn-flat red-text">取消</a>
                                <button type="submit" class="modal-close waves-effect waves-green btn-flat teal-text">
                                    确认
                                </button>
                            </div>
                        </form>
                    </div>
                    <div class="card-action">
                        <!-- 课程列表 -->
                        <h5 class="teal-text mb-4">
                            所选课程
                            <span sec:authorize="hasRole('ROLE_ADMIN')">
                                <a th:href="@{/students/{id_students}/enroll(id_students=${student.id_students})}"
                                   class="btn-floating btn-small waves-effect waves-light lighten-1">
                                    <i class="material-icons">add</i>
                                </a>
                            </span>
                        </h5>
                        <div class="mb-3" th:each="curso:${cursos}">
                            <a th:href="|/cursos/${curso.id_curso}|">
                                <strong th:text="${curso.nomCurso}">课程</strong>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>
<br><br>
<footer class="page-footer teal" th:insert="fragments/footer">
</footer>

<!--  Scripts-->
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="/js/materialize.js"></script>
<script src="/js/init.js"></script>

</body>
</html>